<template>
  <div class="hmi-batch-delete">
    <HmiBatchDeleteTable
      :config="config"
      :show-toolbar="showToolbar"
      :show-actions="showActions"
      :highlight-current-row="highlightCurrentRow"
      @data-loaded="handleDataLoaded"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      @operation-success="handleOperationSuccess"
      @error="handleError"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useHmiConfigStore } from "@/store";
import HmiBatchDeleteTable from "./HmiBatchDeleteTable.vue";
import type { HmiBatchDeleteConfig, HmiBatchDeleteRow, HmiBatchDeleteColumnConfig } from "./types";

interface Props {
  // 基础配置
  apiPath?: string;
  idKey?: string;
  deleteKey?: string;
  transApi?: string;
  updateBodyKey?: string[];
  updateBodyConfig?: Record<string, any>;

  // 显示配置
  showToolbar?: boolean;
  showActions?: boolean;
  highlightCurrentRow?: boolean;

  // 分页配置
  pageSize?: number;
  showSizeChanger?: boolean;
}

interface Emits {
  (e: "data-loaded", data: HmiBatchDeleteRow[]): void;
  (e: "selection-change", selection: HmiBatchDeleteRow[]): void;
  (e: "row-click", row: HmiBatchDeleteRow): void;
  (e: "operation-success", type: string, data: any): void;
  (e: "error", error: Error): void;
}

const props = withDefaults(defineProps<Props>(), {
  showToolbar: true,
  showActions: true,
  highlightCurrentRow: true,
  pageSize: 10,
  showSizeChanger: true,
  idKey: "ID",
  deleteKey: "index",
});

const emit = defineEmits<Emits>();

// Store
const route = useRoute();
const hmiConfigStore = useHmiConfigStore();

// 配置计算
const config = computed<HmiBatchDeleteConfig>(() => {
  // 从路由或 props 获取 API 路径
  const apiPath = props.apiPath || (route?.meta?.params as any)?.api || "";

  // 从 HMI 配置获取表格规则
  const tableRule = hmiConfigStore.getTableHeaderRuleByPath(route.path);
  const batchDeleteRule = tableRule?.columnRule?.batchDelete || [];
  const batchDeleteOptions = tableRule?.showRule?.batchDeleteOptions || {};

  // 构建列配置
  const columns: HmiBatchDeleteColumnConfig[] = batchDeleteRule
    .slice()
    .sort((a, b) => (a.index ?? 0) - (b.index ?? 0))
    .map((rule) => ({
      ...rule,
      minWidth: 120, // 默认最小宽度
    }));

  // 构建功能配置
  const features = {
    isAdd: batchDeleteOptions.isAdd || false,
    isBatchReset: batchDeleteOptions.isBatchReset || false,
    isBatchDelete: batchDeleteOptions.isBatchDelete || false,
    isBatchTrans: batchDeleteOptions.isBatchTrans || false,
    isDownload: batchDeleteOptions.isDownload || false,
    isReset: batchDeleteOptions.isReset || false,
    isTrans: batchDeleteOptions.isTrans || false,
    isDelete: batchDeleteOptions.isDelete || false,
    isPoint: batchDeleteOptions.isPoint || false,
    isBatchPoint: batchDeleteOptions.isBatchPoint || false,
  };

  return {
    apiPath,
    idKey: batchDeleteOptions.idKey || props.idKey,
    updateValueKey: batchDeleteOptions.updateValueKey || "",
    deleteKey: batchDeleteOptions.resetKey || props.deleteKey,
    transApi: props.transApi || batchDeleteOptions.transApi || "",
    autoPointApi: batchDeleteOptions.autoPointApi || "",
    updateBodyKey: props.updateBodyKey || batchDeleteOptions.updateBodyKey || [],
    updateBodyConfig: props.updateBodyConfig || batchDeleteOptions.updateBodyConfig || {},
    columns,
    features,
    pagination: {
      pageSize: props.pageSize,
      showSizeChanger: props.showSizeChanger,
    },
    orderByKey: batchDeleteOptions.orderByKey || "",
    group: batchDeleteOptions.group || "",
  };
});

// 事件处理
function handleDataLoaded(data: HmiBatchDeleteRow[]) {
  emit("data-loaded", data);
}

function handleSelectionChange(selection: HmiBatchDeleteRow[]) {
  emit("selection-change", selection);
}

function handleRowClick(row: HmiBatchDeleteRow) {
  emit("row-click", row);
}

function handleOperationSuccess(type: string, data: any) {
  emit("operation-success", type, data);
}

function handleError(error: Error) {
  emit("error", error);
}
</script>

<style lang="scss" scoped>
.hmi-batch-delete {
  width: 100%;
  height: 100%;
}
</style>
